<template>
  <grid-layout :layout="layout" :item-style="{ padding: '15px' }" class="housing-detail">
    <template #left>
      <a-row type="flex">
        <a-col :span="8">
          <avatar :src="details.field7" style="width: 90px" />
        </a-col>
        <a-col :span="16">
          <descriptions :columns="descriptionsList.slice(0, 4)" :data-source="details" :col-span="24" />
        </a-col>
      </a-row>
      <div class="warn-info">
        <split-title text="预警信息" />
        <descriptions :columns="descriptionsList.slice(-3)" :data-source="details" :col-span="24" />
      </div>
    </template>
    <template #right>
      <div style="width: 100%; height: 100%" class="flex flex-column">
        <div class="info-title flex-fixed">抓拍记录</div>
        <common-table
          :columns="columns"
          :fetch-params="paramsData"
          :fetch="getTableDataAsync"
          ref="table"
          :show-toolbar="false"
          @vue:mounted="() => $refs.table.load()"
          class="flex-auto-height"
        >
          <template #index="{ index }">
            <span>{{ index + 1 }}</span>
          </template>
        </common-table>
      </div>
    </template>
  </grid-layout>
</template>

<script>
import { peopleHouseWarnPeopleSnapList } from '@gis/lib/api';
import GridLayout from '@gis/lib/layouts/grid-layout.vue';
import Avatar from '@gis/lib/components/img-viewer/avatar-card.vue';
import areaCodeMixin from '@gis/lib/mixins/areaCodeMixin';
import SplitTitle from '@gis/lib/components/splitter/split-title.vue';
import { handleTableRes } from '@gis/lib/utils/resolver.js';
import { getEnumText } from '@gis/lib/enums/index.js';

export default {
  name: 'people-detail',
  components: { SplitTitle, Avatar, GridLayout },
  mixins: [areaCodeMixin],
  props: {
    details: { type: Object, default: () => {} },
  },
  data() {
    return {
      descriptionsList: [
        { label: '姓名', key: 'field2' },
        { label: '电话', key: 'field6' },
        { label: '身份证', key: 'field5' },
        { label: '性别', key: 'field3', format: (v) => getEnumText('gender', v) },
        { label: '报警时间', key: 'warn_time' },
        { label: '报警内容', key: 'warn_content' },
        { label: '报警类型', key: 'warn_type_name' },
      ],
      layout: [
        { name: 'left', colSpan: 8 },
        { name: 'right', colSpan: 16 },
      ],
      columns: [
        {
          title: '抓拍地点',
          dataIndex: 'device_name',
        },
        {
          title: '抓拍时间',
          dataIndex: 'create_time',
        },
      ],
    };
  },
  computed: {
    paramsData() {
      return Object.assign({}, this.apiParams, {
        start_time: this.details.field22,
        end_time: this.details.warn_time,
        people_id: this.details.field1,
        stranger: 0,
      });
    },
  },
  methods: {
    async getTableDataAsync(params) {
      if (!params.area_code) return;
      return await handleTableRes(peopleHouseWarnPeopleSnapList(params));
    },
  },
};
</script>

<style lang="less">
.housing-detail {
  color: #ffffff;
  width: 100%;
  height: 100%;
  .warn-info {
    margin-top: 15px;
  }
  .info-title {
    font-size: 16px;
    font-weight: bold;
    color: #6acbc1;
    line-height: 26px;
  }
}
</style>
